【JS】qiankun微前端实践
首页专栏javascript文章详情0qiankun微前端实践款冬发布于 5 分钟前前言在介绍具体的接入方案和文档之前，先简单介绍一下，什么是微前端，以及为什么我们的前端工程要做微前端化的改造？什么是微前端？微前端，用一句话来解释就是：将多个独立的前端应用聚合在一起组成一个全新的应...
2024-01-10
qiankun微前端如何匹配路由的？
qianku微前端是如何匹配路由的，需要源码部分，在哪个位置（大概位置）匹配的，是qiankun处理的还是single-spa，还是import-html-entry处理的，比如说路由为app#/do，子应用如何匹配的do这个路由，我想针对这个匹配规则稍作调整，或者，大家有关于history模式下，主应用和微应用处于同一服务器同一端口（仅有域名）下，主应用刷新自动进入微应用的方案也可以，前提是主应...
2024-02-04
微前端qiankun从搭建到部署的实践
最近负责的新项目用到了qiankun，写篇文章分享下实战中遇到的一些问题和思考。示例代码： https://github.com/fengxianqi/qiankun-example。在线demo：http://qiankun.fengxianqi.com/单独访问在线子应用：subapp/sub-vuesubapp/sub-react为什么要用qiankun项目有个功能需求是需要内嵌公司内部的一个现有工具，该工具是独立部...
2024-01-10
qiankun vue 多tag切换问题解决方案
qiankun 示例与文档中都只提供了单页面的实例，更加偏向于展示类。而很大一部分需求都是操作类页面。然后就带来了多页签切换的问题。先看效果多子应用页签切换。子应用页签切换数据不会刷新。实现方式思路 手动加载子应用，自己管理子应用创建，卸载。 提前或计算函数，...
2024-01-10
若依+qiankun菜单路由该如何配置？
情景截图：如图中所标识的，流程管理整个模块作为了子应用，但是流程管理是被划分到管理中心这个大模块下的，所以在菜单点击的时候，地址栏的路径就是/manageCenter/subActivity/modeler，根据qiankun的activeRule匹配规则，包含“subActivity”的被视为子应用，这个时候子应用也被加载了，但是加载的路由地址不是从/subActivity开始的，而是从/man...
2024-02-20
「微前端实践」使用Vue+qiankun微前端方案重构老项目的本地验证
10月份换了新的工作，参与完一个月的需求迭代后，接到了项目重构的任务。简单来说，需要在短时间内提出方案设想，同时进行本地验证，最终需要拿出一套技术替换方案来。于是，埋头苦干了一个月，总算干了点成绩出来，今天把当时的思考和实践做个简单总结，就当是个复盘吧。 一、老...
2024-01-10qiankun子路由刷新404大家是如何解决的？
1.qiankun的子路由配置挺奇葩的，alias形式直接报错异常；2.本地开发，加载子项目，刷新页面，直接报404，啥都没有了；回答：devServer.historyApiFallbackboolean = false When using the HTML5 History API, the index.html page will likely have to be served ...
2024-03-03qiankun子应用切换，导致应用的请求不断重复，求大佬给解决思路？
qiankun的基座是用vue2.X版本搭建的，然后子应用是用create-react-app来进行的构建，子应用所有的qiankun配置都正常配置了。问题出现的步骤是：当我子应用相互切换的时候，先走了子应用自己组件内部的useEffect，再走了qiankun的mounted回调函数，然后又会走useEffect，正是因为useEffect重复执行了好几次，所以就会出现重复请求的问题。已经排查了...
2024-02-10前端ui库得有多少修为才能造轮子？
单纯自己写着玩回答：github直接抄一个就行了，能看懂基本问题不大，重点放在规范和项目架构，以及部分复杂组件的逻辑?，我觉得一般个人从头开始搞组件库的意义不大，因为规范会很乱，以及没啥人用。回答：0基础也可以写着玩，很多培训班的项目库里面就会有比如说造ui库这种教程。如果说单纯靠自己，其实会了基本功之后也可以，比如说你在项目遇到一个痛点，解决掉之后可以把解决问题的方案抽象出来公开到npm上面...
2024-03-10ui设计和前端的区别
前端设计和ui研究方向不同，ui用户研究、交互设计、界面设计，web前端是html、css、js需要编写代码；不同的职业机会，ui设计：前端开发工程师、资深前端开发工程师、前端架构师等，web前端：图形设计师、交互设计师、用户测试等。1.研究方向不同ui设计研究方向为：用户研究、交互设计、界面设计...
2024-01-10
Omi 前端跨框架跨平台框架
Omiu – 使用 Omi 打造的跨框架、跨主题 UI 组件库。使用 TypeScript 开发跨框架的按钮组件:import { tag, WeElement, h, extractClass } from 'omi'import * as css from './index.scss'interface Props { size?: 'medium' | 'small' | 'mini', type?: 'primary' | 'success' | 'warning' | 'danger' | '...
2024-01-10
Vue框架和前后端开发详解
目录1. 抽象工厂模式2. UML图3. 代码示例4. 总结4.1 抽象工厂模式的总结4.2 工厂模式的总结1. 抽象工厂模式针对工厂方法模式无法创建一组相关或相互依赖对象的问题，引入了抽象工厂模式抽象工厂模式的官方定义是一种为访问类提供一个创建一组相关或相互依赖对象的接口，且访问类无须指定所要产...
2024-01-10
前端Vue框架快速学习
Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。Node和...
2024-01-10
前端框架——Vue脚手架
Vue是当前最流行的三大前端框架之一，刚学Vue的时候感觉也没什么新奇的地方，后来对Vue的接触深了才知道这个框架流行的原因了。现在进入正题：先说一说脚手架的作用——它能帮助你快速开始一个vue项目，其实其本质就是给你一套文件结构，包含基础的依赖库，你只需要npm install一下就可以安装...
2024-01-10
Vue 前端框架接入QQ在线客服
Vue 前端框架接入QQ在线客服，效果如下图：后面就根据自己的需要选择不同的方式，下面是使用教程：-------------------------------------------------------------------------------------------1、首先是第三方js包存放的位置 一定要放在 static 目录下否则引用不到2、网上查找到的引用第三方包的四种方式， 实测较稳...
2024-01-10
前端框架之Vue(1)-第一个Vue实例
vue官方文档知识储备es6语法补充let使用 var 声明的变量的作用域是全局。{ var a = 1;}console.info(a); // 1例1：var arr = [];for (var i = 0; i < 10; i++) { arr[i] = function(){ console.info(i); }}arr[6]();// 10var arr = [];for (let i = 0; i < 10; i++) { arr[i] = function...
2024-01-10
MUI 最接近原生 APP 体验的高性能前端框架
MUI 是 Dcloud 官方推出的一个基于 html5+ 标准的框架，同时拥有 h5 组件和原生组件，原生组件依赖于 html5+ 运行环境，也就是原生 app 里面的 webview 组件（能加载显示网页，可以将其视为一个浏览器），所以 MUI 里面的原生组件不能用于浏览器环境，可以通过 MUI 里面的 mui.os.plus 进行判断，如果是 plus 环境...
2024-01-10
私有云搭建一个前端框架1-如何搭建Linuxwin7
一、打造一个多节点的Linux环境1.需要的软件以及环境阿里云开发者社区VMware Fusion（虚拟机）下载地址：http://mirrors.aliyun.com/centos/7/isos/x86_64/CentOS（Linux镜像）下载地址：https://www.vmware.com/cn/products/workstation-pro/workstation-pro-evaluation.htmlSecureCRT（SSH中端工具）Transmit(传输文件)2.开始安装首先先下载...
2024-01-10
前端框架Vue学习的心得记录（基础篇）
我的最新博客在：Secret_wu\'s coding note目标：快速上手Vue框架（2.x版本）方法：通过看Vue的官方手册（Vue官方网站）内容：本博客记录一些学习Vue官方文档中的心得，便于日后启发。（基础篇）再次学习vue的心得记录：（这是偏大致阅读了官方文档后，再次仔细学习Vue的心得记录）前端框架Vue自学之...
2024-01-10
前端使用Vue框架解决跨域问题
现在项目开发，都实现前后端分离开发，导致前端向后端发送请求，会出现跨域错误 ；如何解决这个问题？ 方法一：后端可以下载cors包，对指定的前端域名允许请求；具体操作可以自行百度； 今天主要介绍的是前端人员不用去麻烦后端人员，就可以通过前端设置实现跨域请求...
2024-01-10
写前端页面步骤----vue+iview
1：用iview构建基本HTML页面2：在export default{ }中写一个data(){return:{变量：值}}全局对象，用于传递与绑定HTML参数。3：在export default{ }中写一个methods：{ }对象，里面写一系列方法。例：初始化请求参数方法——路由转发方法——增删改查请求后端方法。。。4：mounted(){ }，与methos同级，方...
2024-01-10
年GitHub常用的vue的UI框架
在做vue项目开发的时候遇到了一个问题，如何选择自己的技术栈？随着vue的开发者越来越多，各种框架也渐渐多起来，面对众多的框架，如何选择一款适合自己业务的框架，还是一件比较纠结的事情，今天总结了一下2020年GitHub上面比较受欢迎，star较高的几个UI框架。1：饿了么ElementUI推荐指数：star:45....
2024-01-10![[前端]前段Vue框架/前后端分离](/wp-content/uploads/thumbs/529122_thumbnail.jpg)
[前端]前段Vue框架/前后端分离
Idea---》setting--》plugins搜索Vue进行安装简单实现官方演示 新建项目--》创建demo01.html第一个Vue实例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><!--View层--><div id="app"> {{message}}</div><!--导入vue.js--><script src="https://cd...
2024-01-10有前端使用过vue打印收银小票吗？
前端使用vue框架，如何通过ip地址连接打印机，并触发打印呢，并且打印的内容可设置等回答：没做过打印收银小票，做过快递标签打印。快递标签打印机和普通的打印机不一样，它接收的不是图像而是 XML ，因此使用 window.print 等方案是无效的，而是要根据打印机厂商提供的协议生成对应的 XML 去启动打印，我做的那款打印机是用的 webSocket + 特定的 XML 结构，拼 XML 很简单...
2024-02-22
vue——前端跨域
***针对的是不同域名、不同协议的跨域：1、找到config文件中开发环境的配置文件——dev.env.js,在里面将要跨域的域名配置进去2、找到config文件中线上环境的配置文件——prod.env.js,在里面将要跨域的域名配置进 3、配置完后，还需要在config的index.js中配置对外的跨域域名，target的值为要跨域的域名（其...
2024-01-10
初识 vue —— 最简单的前后端交互示例
一、学习 vue 面临的问题最近想学一门前端技术防身，看到博客园中写 vue 的多，那就 vue 吧。都说 vue 的官方教程写得好，所以我就从官方教程开始学习。官方教程说“Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用...
2024-01-10
vue前戏ES6
es6语法es6语法：let和const:{var a=123;let b=234;}console.log(a);console.log(b);浏览器里会只看到123;而且还会抱一个b is not define的错误为什么?在{ }局部作用域里面可以找到a变量值?这是js var的一个坑,一旦定义了就是全局的变量.var示例:{var a=123;let b=234;}var a=234;console.log(a);console.log(b);输出的是234,因为var ...
2024-01-10
【Web前端问题】vue中递归
在vue中用了一个递归，methods: { combine ([item, ...arr]) { if (arr.length) { const sub = this.combine(arr); const res = []; sub.forEach(s => item.forEach(i => res.push(`${i},${s}`))) return res } else { ...
2024-01-10vue实现前端分页完整代码
本文实例为大家分享了vue实现前端分页的具体代码，供大家参考，具体内容如下首先，做出来的效果如图所示，具体的Ajax请求数据可以写在点击函数中分页效果算是比较费脑子的，里面计算有些麻烦，本文上完整代码，一起学习进步“上一页”写两个li元素，如果已经是第一页，那么就禁止鼠标点...
2024-01-10
【vue】后端返回数据时前端不显示且报错？
网页：https://katcloud.cn/biliVideo...仓库：https://github.com/KatCloud/B...每次通过getVideoList()获取后端返回的list，再通过moreVideoList()获取更多，但是偶尔会出现这个问题，导致页面不显示获取到的list，而代码中并没有获取这个text，实在是不知道是哪里出了问题，且只有登录后才会出现...本人前端菜鸡...
2024-02-10
vue中清除定时器 - WEB前端小菜鸟
vue中清除定时器 2018-11-12 14:49 WEB前端小菜鸟 阅读(12229) 评论(0) 编辑 收藏 举报1.data中定义timer:90,timeName:null点击支付则倒计时按钮出来 pay(){this.timeName= setInterval(()=>{ this.timer-- console.log(this.timer) if(this.timer==0){ alert(\'时间到返回主页\') return }},1000)} ...
2024-01-10
【前端】vue显示隐藏底部导航问题
我现在是想通过router的全局钩子来实现底部导航在一级页面显示，在子页面不显示，所以在app.vue中加入了navShow来控制，可是我router.app得不到这个值。请问有什么方法实现吗。希望前辈们指导下。回答在路由的元信息中设置不是更好吗？router.jsconst router = new VueRouter({ mode: 'history', routes: [ { path: '/f...
2024-01-10vue实现前端列表多条件筛选
本文实例为大家分享了vue实现前端列表多条件筛选的具体代码，供大家参考，具体内容如下1、先上图：2、搜索条件绑定的数据是：filterForm:{ schoolName:'',//输入的学校名称 position:'',//选择的区域区域 schoolLevel:"",//选择的学校办别},schoolList:[ {schoolName:'青岛市实验高级中学',schoolLevel:"",position:'山东...
2024-01-10
